<template>
  <!-- 首页专辑更多 -->
  <div class="home-album" v-title :data-title="$t('router.homeAlbumTitle')">
    <div class="Breadcrumbback">
      <Breadcrumb></Breadcrumb>
    </div>
    <Cover
      :toName="isMobile ? 'mAlbumDetail' : 'albumDetail'"
      :listData="list"
      v-loading="fullscreenLoading"
    ></Cover>
    <div v-if="loading" class="load-bottom">
      <nice-loading />
    </div>
    <nice-empty
      v-show="list.length == 0 && fullscreenLoading == false"
      :emptyText="$t('public.noData')"
    ></nice-empty>
  </div>
</template>

<script>
import Breadcrumb from "@/components/common/Breadcrumb/Index";
import Cover from "@/components/common/Cover/Index";
export default {
  data() {
    return {
      //专辑列表
      list: [],
      // 是否显示加载动画
      loading: false,
      // 是否还有数据
      loadStatus: true,
      fullscreenLoading: true,
    };
  },
  components: {
    Breadcrumb,
    Cover,
  },
  computed: {
    isMobile() {
      return this.$store.getters.isMobile;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getRecommendAlbum();
  },
  methods: {
    //获取歌单
    async getRecommendAlbum() {
      this.fullscreenLoading = true;
      try {
        this.loadStatus = false;
        let res = await this.$api.home.getRecommendAlbum({});
        this.fullscreenLoading = false;
        if (res.code === 1000000) {
          this.list = res.source
            ? this.utils.processingData(this.list, res.source)
            : [];
        } else {
          this.$message({
            showClose: true,
            message: res.data,
            type: "error",
          });
        }
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
